<script setup lang="ts">
import { ref, onMounted } from "vue";
import { updateGltf } from "@/utils/gltfLoaders";
import * as mapvgl from "mapvgl";
import { chongqing } from "@/utils/chongqi";
import { center as cscenter, arrCs } from "@/utils/gltfLoaders";
import { convertLL2MC } from "@/utils/mercator/index";
import {
  Engine,
  FlyManager,
  UltraDynamicSky,
  EmptySky,
  Default3DTiles,
  DynamicSky,
  AreaMeasure,
  DynamicWeather,
} from "mapv-three";
import { Mesh, SphereGeometry, MeshStandardMaterial } from "three";

const dom = ref();
//const center = [106.560007, 29.566974]; //cscenter;
const center = cscenter;
//const center = [arrCs[0].lon, arrCs[0].lat];
const engines = ref<Engine>();
console.log("--------------------------");
const s = convertLL2MC({
  x: center[0],
  y: center[1],
});
console.log(s);

const loadgtf = () => {
  const glbObj = [
    {
      url: "http://bj.bcebos.com/v1/mapopen/api-demos/model/building4.glb",

      data: [
        {
          position: [113.014101, 28.118636, 0],
          scale: [8, 8, 3],
        },
        {
          position: [113.013054, 28.116573, 0],
          scale: [1, 1, 1],
        },
      ],
    },
    {
      url: "http://bj.bcebos.com/v1/mapopen/api-demos/model/building5.glb",
      data: [
        {
          position: [113.011697, 28.116784, 0],
          scale: [1, 1, 1],
        },
      ],
    },
  ];

  glbObj.forEach((item) => {
    updateGltf(item, engines.value);
  });
};

const updateSky = () => {
  // sunny | partlyCloudy | cloudy | overcast | foggy | rainy | snowy
  // 与sky上的属性同义
};
const myDis = ref();

const celiang = () => {
  myDis.value = new BMapGLLib.DistanceTool(map);

  myDis.value.addEventListener("drawend", function (e) {
    console.log("drawend");
    console.log(e.points);
    console.log(e.overlays);
    console.log(e.distance);
  });

  myDis.value.addEventListener("addpoint", function (e) {
    console.log("addpoint");
    console.log(e.point);
    console.log(e.pixel);
    console.log(e.index);
    console.log(e.distance);
  });

  myDis.value.addEventListener("removepolyline", function (e) {
    console.log("removepolyline");
    console.log(e);
  });
};

const zhuanhuan = (lon, lat) => {
  //     坐标常量说明
  // COORDINATES WGS84 = 1，WGS84坐标COORDINATES WGS84 MC = 2，WGS84的平面墨卡托坐标
  // COORDINATES GCJ02 = 3，GCJ02坐标COORDINATES GCJ02 MC = 4，GCJ02的平面墨卡托坐标
  // 大COORDINATES BD09 = 5，百度bd09经纬度坐标
  // COORDINATES BD09 MC = 6，百度bd09墨卡托坐标%，
  //  COORDINATES MAPBAR = 7 mapbar地图坐标
  // COORDINATES 51 = 8，51地图坐标
  // convertor.translate(坐标，坐标类型，需要转换成的坐标类型，转换成功后的回调函数）
  var convertor = new BMapGL.Convertor();
  let points = new BMapGL.Point(lon, lat);
  convertor.translate([points], 5, 6, (data) => {
    console.log(data);
  });
};

onMounted(() => {
  const map = new BMapGL.Map(dom.value);
  zhuanhuan(center[0], center[1]);
  let points = new BMapGL.Point(center[0], center[1]);
  map.centerAndZoom(points, 18);
  map.setMapStyleV2({
    styleId: "0dcb5672684e95119c496d2697ba2577",
  });

  map.enableScrollWheelZoom();
  map.setTilt(90); //地图倾斜角度
  map.setHeading(0); //地图旋转角度

  engines.value = new Engine(map, {
    rendering: {
      enableAnimationLoop: true,
    },
  });
  engines.value.map.setCenter(center);
  engines.value.map.setZoom(18);
  engines.value.map.setPitch(70);
  engines.value.rendering.useMrt = true;
  engines.value.rendering.shadow.enabled = true;

  initMaps(map, points);
});

const initMaps = async (map, points) => {
  console.log(mapvgl);
  var view = new mapvgl.View({
    map,
  });
  var pt = [];

  var convertor = new BMapGL.Convertor();

  convertor.translate([points], 5, 6, (data) => {
    console.log(data.points[0]);
    const cu = data.points[0];
    pt = [cu.lng, cu.lat];

    var polygons = [];
    for (var i = 0; i < chongqing.length; i++) {
      var line = chongqing[i];
      var polygon = [];
      polygon.push([pt[0], pt[1]]);
      for (var j = 3; j < line.length; j += 2) {
        pt[0] += line[j] / 100 / 2;
        pt[1] += line[j + 1] / 100 / 2;
        polygon.push([pt[0], pt[1]]);
      }
      const obj = {
        geometry: {
          type: "Polygon",
          coordinates: [polygon],
        },
        properties: {
          height: line[0],
        },
      };
      polygons.push(obj);
    }

    //   const newarr = [];
    // //   arrCs.forEach((item) => {
    // //     const { x, y } = lonlatToMercator(item);
    // //     newarr.push([x, y]);
    // //   });

    //   const obj = {
    //     geometry: {
    //       type: "Polygon",
    //       coordinates: [newarr],
    //     },
    //     properties: {
    //       height: 8,
    //     },
    //   };
    //polygons.push(obj);

    var shaperLayer = new mapvgl.ShapeLayer({
      color: "rgba(00, 00, 00, 1)", // 柱状图颜色
      enablePicked: true, // 是否可以拾取
      selectedIndex: -1, // 选中项
      selectedColor: "#ee1111", // 选中项颜色
      autoSelect: true, // 根据鼠标位置来自动设置选中项
      opacity: 1,
      // blend: "lighter",
      onClick: (e) => {
        // 点击事件
        console.log(e);
      },
    });
    console.log(polygons);
    view.addLayer(shaperLayer);
    shaperLayer.setData(polygons);
  });
};
</script>

<template>
  <div ref="dom" id="container"></div>
  <input type="button" value="开启" @click="celiang && myDis.open()" />
  <input type="button" value="关闭" @click="myDis.close()" />
</template>

<style lang="scss">
#container {
  width: 100%;
  height: 700px;
}
</style>
